<script setup lang="ts">
import { ref } from "vue";
import { useLocalStore } from "@/views/layer/gismap/store";
import moment from "moment";
const emitEvents = defineEmits(["toggleShowLayerManager"]);
const store = useLocalStore();
const radio = ref(true);
const positionTime = ref([moment().subtract(1, "months"), new Date()]);
watchEffect(() => {
  store.setMarkerClusterFlag(radio.value);
  store.setPositionTime(positionTime.value);
});
</script>

<template>
  <div class="cluster-switch">
    <span class="layer" @click="emitEvents('toggleShowLayerManager')"
      >图层</span
    >
    <span class="cluster-tips">聚集显示</span>
    <el-switch
      class="ml-2"
      v-model="radio"
      style="
        -el-switch-on-color: #13ce66;

        --el-switch-off-color: #ff4949;
      "
    />
    <span style="width: 240px; margin-left: 20px">
      <el-date-picker
        size="small"
        v-model="positionTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :size="size"
        style="width: 100%"
      />
    </span>
  </div>
</template>

<style scoped lang="scss">
.cluster-switch {
  position: absolute;
  top: 0;
  right: 17px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 555px;
  height: 66px;
  background-color: rgb(255 255 255 / 100%);
}

.layer {
  display: inline-block;
  width: 65px;
  height: 65px;
  margin-left: 15px;
  font-size: 14px;
  line-height: 65px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #1990ff;
  border-radius: 50%;
}

.cluster-tips {
  margin: 0 25px 0 32px;
  font-family: PingFangSC-bold, sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: rgb(0 0 0 / 100%);
  text-align: left;
}
</style>
